<template>
	<view class="products" v-if="userInfo.type!=2">
		<view class="module-product__group" id="moduleProductGroup">
			<view v-for="(item,index) in products" :key="index"  class="module-product__group__item">
				<navigator :url="'/pages/product/detail?id='+item.id" open-type="navigate">
				<image class="hd" :src="item.image" mode="aspectFill"></image>
				<view class="bd">
					<view class="title">{{item.product_name}}</view>
					<view class="info">
						<view  class="price"><text class="jg">&yen;<text class="num">{{item.prices[0]?item.prices[0].price:0}}</text></text>起</view>
						
					</view>
				</view>
				</navigator>
			</view>
		</view>
	</view>
	<checkOrder v-else></checkOrder>
</template>

<script>
	import {apiUrl} from '@/api/base.js'
	import checkOrder from "@/components/check-order.vue";	
	var app = getApp();
	export default {	
		components: {
			checkOrder
		},
		data() {
			return {
				userInfo:'',
				products:""
			}
		},
		onLoad(opt) {
			if(opt.scene){
				let params = opt.scene.split("&")				
				uni.setStorageSync('fxid', decodeURIComponent(params[0]));
				this.orderData.product_id = params[1]
			}
		},
		onShow(){
			if(uni.getStorageSync("userInfo")){
				this.userInfo=uni.getStorageSync("userInfo")
				app.checkType()
			}
			uni.request({
				url: apiUrl+"addons/car/product/index",
				data:"",
				method:"GET",
				success:(res)=>{					
					let data = res.data.data
					this.products = data					
				},
				fail:(res)=>{
					console.log(res)
				}
				
			})			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>	
	@mixin displayflex {
		// 弹性布局
		display: flex;
	}
	
	@mixin justifyspace {
		//两端分散布局
		display: flex;
		justify-content: space-between;
	}
	
	@mixin justifyspacec {
		//两端分散垂直居中布局
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	@mixin alignJustify {
		// 垂直水平居中
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	@mixin alignItems {
		// 垂直居中
		display: flex;
		align-items: center;
	}
	
	@mixin ellipse {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	@mixin ellipses {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
		overflow: hidden;
	}
	
	@mixin shortLine {
		content: "";
		display: block;
		width: 40rpx;
		height: 2rpx;
		position: absolute;
		top: 50%;
		background-color: #e5e5e5;
	}
	
	@mixin title {
		color: $uni-text-color-inverse;
		padding: 60rpx 16rpx 20rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 26rpx;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
		background: -webkit-gradient(linear, top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .3)));
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
		background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
		background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
	}
	
	
	.module-product {
		&__group {
			padding: 14rpx;
	
			&__item {
				display: inline-block;
				width: 340rpx;
				margin: 10rpx;
				overflow: hidden;
				vertical-align: top;
				border-radius: $uni-border-radius-lg;
				background-color: $uni-bg-color;
	
				.hd {
					width: 340rpx;
					height: 230rpx;
				}
	
				.bd {
					.title {
						@include ellipses;
						height: 80rpx;
						padding: 0 12rpx;
						margin-top: 12rpx;
						font-size: $uni-font-size-base;
						word-break: break-all;
					}
	
					.info {
						display: flex;
						justify-content: space-between;
						color: $uni-text-color-grey;
						padding: 12rpx;
						font-size: $uni-font-size-mini;
						font-family: Arial, Helvetica, sans-serif;
	
						.price {
							.jg {
								color: $uni-text-color-price;
	
								.num {
									font-size: $uni-font-size-lg;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	
		.module-more-bar {
			margin-top: -20rpx;
		}
	}
	
	.module-product-bar {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		right: 0;
		z-index: 11;
		height: 90rpx;
		background: #FFFFFF;
	}
	
	.module-product-tab {
		border-bottom: 2rpx solid $uni-border-color;
		background-color: $uni-bg-color;
	}
	
	.module-more-bar {
		color: $uni-text-color-primary;
		padding: 24rpx 0;
		text-align: center;
	
		&__txt {
			display: inline-block;
			vertical-align: middle;
			font-size: $uni-font-size-sm;
		}
	
		&__icon {
			vertical-align: middle;
			margin: 6rpx 0 0 8rpx;
		}
	}
</style>
